<template>
    <div class="box-tree">
        <vue-tree :data="treeData">
            <template #root="{ row, handleExpand }">
                <div class="root-content">
                    <div class="expand-wrapper" @click="handleExpand">
                        <div class="expand-status">
                            <div class="tips">
                                <img class="close" :src="images[!row.expand ? 0 : 1]" />
                                <img class="icon" :src="images[2]" />
                            </div>
                        </div>
                        <div class="detail-content">
                            <span class="title">{{ row.label }}</span>
                        </div>
                    </div>
                    <vue-input v-model="searchName" placeholder="请输入名称搜索" @search="handleSearch"
                        :suggest-data="suggestData" />
                </div>
            </template>
            <template #branch="{ row, handleExpand }">
                <div class="branch-content node-content" @click="handleExpand">
                    <div class="expand-status">
                        <div class="tips">
                            <img class="close" :src="images[!row.expand ? 3 : 4]" />
                        </div>
                    </div>
                    <div class="detail-content">
                        <span class="title">{{ row.label }}(共{{ row.children.length }}份)</span>
                    </div>
                </div>
            </template>
            <template #leaf="{ row }">
                <div class="leaf-content node-content">
                    <div class="text">
                        <div class="title">{{ row.label }}</div>
                        <div class="sub-title">{{ row.label }}</div>
                    </div>
                    <div class="handle" v-if="!row.children || !row.children.length">
                        <button class="button" @click="scanAndCorrect(row)">xxxx</button>
                        <button class="button" :class="{ disabled: !row.studyTaskId }" @click="viewReport(row)">
                            xxx
                        </button>
                    </div>
                </div>
            </template>
        </vue-tree>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const searchName = ref('')
const isLoading = ref(true)
const treeData = ref([])
const request = () => {
    treeData.value = [{
        label: '000',
        children: [
            {
                label: '111',
            },
            {
                label: '2222',
            },
            {
                label: '3333',
            },
        ]
    }]
}
request();
const suggestData = ref([
    { label: "xxxxxxxxxxxxxxxxx" },
    { label: "xxxxxxxxxxxxxxxxx" },
    { label: "xxxxxxxxxxxxxxxxx" },
    { label: "xxxxxxxxxxxxxxxxx" },
    { label: "xxxxxxxxxxxxxxxxx" },
    { label: "xxxxxxxxxxxxxxxxx" },
    { label: "xxxxxxxxxxxxxxxxx" },
]);

const handleSearch = (val: string) => {
    request();
};
const images = [
    "",
    "",
    "",
    "",
    "",
    "",
];
</script>

<style lang="scss" scoped>
.box-tree {
    width: auto;
    overflow-x: auto;

    :deep(.vue-tree) {
        width: 750px;
    }
}
</style>